<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta content="telephone=no,email=no" name="format-detection">
<meta name="wap-font-scale" content="no">
<title>酒店详情</title>

<!--banner-->
<link href="js/broadcast/broadcast.css" rel="stylesheet" type="text/css" />
<!--hotel-detail-->
<link href="css/hotel-detail.css" rel="stylesheet" type="text/css" />
<!-- 公用样式css -->
<link href="css/base.css" rel="stylesheet" type="text/css" />
<link href="css/evaluate.css" rel="stylesheet" type="text/css" />

<style>
.am-share { font-size: 14px; border-radius: 0; bottom: 0; left: 0; position: fixed; text-align: center; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 300ms; transition: transform 300ms ; width: 100%; z-index: 1110; }
.am-modal-active { transform: translateY(0px);  -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) }
.am-modal-out { z-index: 1109; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%) }
.am-share-title { background-color: #f8f8f8; border-bottom: 1px solid #fff; border-top-left-radius: 2px; border-top-right-radius: 2px; color: #555; font-weight: 400; margin: 0 10px; padding: 10px 0 0; text-align: center; }
.am-share-title::after { border-bottom: 1px solid #dfdfdf; content: ""; display: block; height: 0; margin-top: 10px; width: 100%; }

.am-hours-table{width:100%}
.am-hours-table tr{display:none;}
.am-hours-table th{width:23%;text-align:right;padding:5px;}
.am-hours-table td{text-align:left;padding:5px;}
.am-height{ height:400px;overflow: auto; -webkit-overflow-scrolling: touch;}
</style>

</head>

<body style="font-size:12px">
<header class="header">
    <%--<div class="header-left" onclick="_back(${type})"><img class="img-home" src="images/return.png" /></div>--%>
    <div class="header-center word5 "><a id="hotelName" class="header-arrow">${hotelName}</a></div>
    <div class="header-right2 marg5">
    	<c:if test="${not empty HotelDetail }">
	    	<c:if test="${HotelDetail.Collection}">
	    		<img src="images/icon23.png" width="24" height="24" id="collectionImg" onclick="changeCollection(2)"/>
		    	<img src="images/icon22.png" width="24" height="24" id="cancleCollectionImg" style="display:none" onclick="changeCollection(1)" />
	     	</c:if>
	     	<c:if test="${!HotelDetail.Collection}">
		     	<img src="images/icon23.png" width="24" height="24" id="collectionImg" style="display:none" onclick="changeCollection(2)"/>
		    	<img src="images/icon22.png" width="24" height="24" id="cancleCollectionImg" onclick="changeCollection(1)" />
	    	</c:if>
    	</c:if>
    	<%--<img  class="head-img" src="images/icon24.png" width="24" height="24" onclick="shareWX('${link}')"/>--%>
    </div>
</header>
<div class="main bot60" style="background:#fbfbfb;">
	<!-- 轮播图 -->
	<div class="aui-m-slider">
        <div class="m-slider" data-ydui-slider>
            <div class="slider-wrapper">
                <c:if test="${!empty TurnPicList}">
		            <c:forEach var="trunPic" items="${TurnPicList}">
		                <div class="slider-item"><a href="javascript:;"><img src="${trunPic.PicAddress}" onerror="this.src='images/bjimg4.jpg'"/></a></div>
		            </c:forEach>
	            </c:if>
	            <c:if test="${empty TurnPicList}">
	                  	<div class="slider-item"><a href="javascript:;"><img src="images/bjimg4.jpg"></a></div>
	            </c:if>
            </div>
            <div class="slider-pagination"></div>
        </div>
    </div>
    
    <!--详情-->
	<c:if test="${not empty HotelDetail }">
	<input type="hidden" value="${HotelDetail.Lng}" id="hotleLng"/>
	<input type="hidden" value="${HotelDetail.Lat}" id="hotleLat"/>
	<input type="hidden" value="${HotelDetail.HotelAddress}" id="hotleAddress"/>
    <div class="grade-all">
        <ul class="grade-list1">
            <li class="float-l">
                <c:forEach begin="1" end="${HotelDetail.Grade}">
                    <img src="images/star1.png" width="20" height="20" style="margin-top:-2px;"/>
                </c:forEach>
            	<span>${HotelDetail.Grade}分</span>
            </li>
            <li class="float-r" <%--<c:if test="${HotelDetail.CommentNum !=0 }">--%> onclick="_toJuageList()"<%--</c:if>--%>><span class="wor-colour7"  >${HotelDetail.commentNum}&nbsp;</span><span>条评论</span></li>
        </ul>
        <ul class="grade-list2">
        	<li class="float-l" onclick="openMap()"><img src="images/icon25.png" width="36" height="36" /></li>
            <li class="float-l" onclick="openMap()"><p class="wor-colour8 word4">${HotelDetail.HotelAddress}</p><p>${HotelDetail.AddressExplain}</p></li>
            <li class="float-r"><a href="tel:${HotelDetail.Phone1}"><img src="images/icon26.png" width="40" height="40" /></a></li>
        </ul>
        <ul class="grade-list3">
        	<li class="float-l wor-colour1"><span>${startDate}</span>-<span>${endDate}</span></li>
            <li class="float-r"><span>共${HotelDetail.NightNum}晚</span></li>
        </ul>
    </div>
    </c:if>
    <!--房间列表-->
    <c:forEach var="room" items="${RoomTypeList}">
       <div class="standard">
           <c:if test="${room.FullBit}">
               <div class="corner"><img class="corner-img" src="images/icon27.png"/></div>
           </c:if>
           <div class="stan-left" onclick="_showDetail('${room.RoomType}','${room.ID}',${room.FullBit})">
               <div class="stan-fdj"><img src="images/fdj.png" width="16" height="16"/></div>
                    <img class="stan-img" src="${room.RoomTypePic}" onerror="this.src='images/noroomimg.jpg'"/>

           </div>
           <ul class="stan-right">
               <li><h3 class="word6">${room.RoomType}</h3></li>
               <li class="wor-colour1" >
                   <span class="marg3">${room.RoomTypeExplain1}</span>
                   <span>${room.RoomTypeExplaorderPaymentDetailin2}</span>
               </li>
               <li class="stan-height" onClick="Show_Hidden('${room.ID}')">
                   <span class="wor-colour1 marg3" id="jgmc${room.ID}">最低价</span>
                   <span class="wor-colour4 word7" id="zdj${room.ID}">¥${room.Cheapest}</span>
                   <span class="wor-colour4 word7" id="msj${room.ID}" style="display:none;">¥${room.RackRate}</span>
                   <!-- <span class="wor-colour1 marg3">起</span> -->
                   <span class="stan-bj  float-r" ></span>
               </li>
           </ul>
       </div>
    <c:if test="${!room.FullBit}">
    <div class="love05" id="${room.ID}" style="display:none;">
    	<c:if test="${room.NowPayPrice!=0}">
        <ul class="eject">
            <li class="float-l"><p class="word4">立付立减价</p><p class="minus wor-colour5">立付立减</p></li>
            <li class="float-r">
                <div class="eject-pay  eject-height marg2"><span class="word4">¥${room.NowPayPrice}</span><p class="wor-colour1">已优惠¥${room.RackRate-room.NowPayPrice}</p></div>
                 <%-- <a href="#" onclick="_orderfill('${room.ID}',1,'${room.RoomType}');return false;" class="eject-book"><p class="eject-words">预订</p><p class="eject-bj">在线付</p></a> --%>
            	<c:if test="${!room.FullBit}"><a href="#" onclick="_orderfill('${room.ID}',1,'${room.RoomType}');return false;"  class="eject-book"><p class="eject-words">预订</p><p class="eject-bj">在线付</p></a></c:if>
            </li>
        </ul>
        </c:if>
        <c:if test="${room.MemberPrice != 0}">
        <ul class="eject">
            <li class="float-l"><p class="word4" style="line-height:48px;">会员专享价</p></li>
            <li class="float-r">
                <div class="eject-pay  eject-height marg2"><span class="word4">¥${room.MemberPrice}</span><p class="wor-colour1">已优惠¥${room.RackRate-room.MemberPrice}</p></div>
                 <a href="#" onclick="_orderfill('${room.ID}',2,'${room.RoomType}');return false;" class="eject-book"><p class="eject-words">预订</p><p class="eject-bj">到店付</p></a>
            </li>
        </ul>
        </c:if>
	 </div>
	  </c:if>
    </c:forEach>
    <form id="submitForm" method="post">
   		<input type="hidden" value="${hotelKey}" id="hotelKey" name="hotelKey"/>
		<input type="hidden" value="${startDate}" id="startDate" name="startDate"/>
		<input type="hidden" value="${endDate}" id="endDate" name="endDate"/>
		<input type="hidden" value="${HotelDetail.NightNum}" id="nightNum" name="nightNum"/>
		<input type="hidden" value="" id="reserveType" name="reserveType"/>
		<input type="hidden" value="" id="roomTypeID" name="roomTypeID"/>
		<input type="hidden" value="" id="roomName" name="roomName"/>
		
		<input type="hidden" value="${cityName}" id="cityName" name="cityName"/>
		<input type="hidden" value="${city}" id="city" name="city"/>
		<input type="hidden" value="${lng}" id="lng" name="lng"/>
		<input type="hidden" value="${lat}" id="lat" name="lat"/>
		<input type="hidden" value="${HotelDetail.commentNum}" id="commentNum" name="commentNum"/>
		<input type="hidden" value="${hotelName}"  name="hotelName"/>
		<input type="hidden" value="${HotelDetail.grade}"  name="grade"/>

		<input type="hidden" id="memKey" name="memKey" value="${sessionScope.memKey}">
		<input type="hidden" id="type" name="type" value="${type}">
   	</form>
</div>

<div class="am-share">
  <div class="house_teitle">
    <h3 class="float-l" id="RoomType"></h3>
    <button class="share_btn float-r img-a"></button>
    <input type="hidden" id="RoomId"/>
  </div>
    <section class="aui-scrollView" id="RoomTypePic">
      <div class="m-slider" data-ydui-slider2 >
            <div class="slider-wrapper"></div>
            <div class="slider-pagination"></div>
      </div>
  	</section>
        <div class="am-hours" style="overflow-y:auto;height: 200px;-webkit-overflow-scrolling: touch;">
            <table class="am-hours-table" >
                <tr id="tr1">
                    <th id="td1"></th><td id="tdv1"></td><th id="td2"></th><td id="tdv2"></td>
                <tr>
                <tr id="tr2">
                    <th id="td3"></th><td id="tdv3"></td><th id="td4"></th><td id="tdv4"></td>
                <tr>
                <tr id="tr3">
                    <th id="td5"></th><td id="tdv5"></td><th id="td6"></th><td id="tdv6"></td>
                <tr>
                <tr id="trl1">
                    <th id="tdl1"></th><td colspan="3" id="tdlv1"></td>
                <tr>
                <tr id="trl2">
                    <th id="tdl2"></th><td colspan="3"  id="tdlv2"></td>
                <tr>
                <tr id="trl3">
                    <th id="tdl3"></th><td colspan="3"  id="tdlv3"></td>
                <tr>
                <tr id="trl4">
                    <th id="tdl4"></th><td colspan="3"  id="tdlv4"></td>
                <tr>
                <tr id="trl5">
                    <th id="tdl5"></th><td colspan="3"  id="tdlv5"></td>
                <tr>
                <tr id="trl6">
                    <th id="tdl6"></th><td colspan="3"  id="tdlv6"></td>
                <tr>
                <tr id="trl7">
                    <th id="tdl7"></th><td colspan="3"  id="tdlv7"></td>
                <tr>
            </table>
        </div>

  <div id="showPriceBut" class="am-share-footer"><button class="house-button" onclick="showprice()">查看全部价格</button></div>
</div>
<!-- jquery引入 -->
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/broadcast/slider.js"></script>
<script type="text/javascript" src="js/broadcast/tab.js"></script>
<script type="text/javascript" src="js/artDialog/artDialog.source.js?skin=simple"></script>
<script type="text/javascript" src="js/artDialog/plugins/iframeTools.source.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript">
    function Show_Hidden(trid){
        if( document.getElementById(trid).style.display=="block"){
            document.getElementById(trid).style.display='none';
            $("#jgmc"+trid).html("最低价");
            $("#msj"+trid).hide();
            $("#zdj"+trid).show();
        }else{
        	document.getElementById(trid).style.display='block';
            $("#jgmc"+trid).html("门市价");
            $("#zdj"+trid).hide();
            $("#msj"+trid).show();
        }
    }
    
    function _orderfill(id,type,roomName) {
    	$("#reserveType").val(type);
    	$("#roomName").val(roomName);
    	$("#roomTypeID").val(id);
		$("#submitForm").attr("action","home/orderFilling").submit();
    }
    //跳转评价列表
    function _toJuageList() {
        $("#submitForm").attr("action","order/getEvaluateList").submit();
    }
    
    function _back(type){
    	if(type=="2"){
    		$("#submitForm").attr("action","home/collection").submit();
    	}else{
	    	$("#submitForm").attr("action","home/hotelList").submit();
    	}
    }
    
    $(document).ready(function(){
		wx.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: '${wxMap.appId}', // 必填，公众号的唯一标识
			timestamp: '${wxMap.timestamp}' , // 必填，生成签名的时间戳
			nonceStr: '${wxMap.nonceStr}', // 必填，生成签名的随机串
			signature: '${wxMap.signature}',// 必填，签名
			jsApiList: [
				'openLocation', //获取地理位置接口
				'getLocation' //获取地理位置接口
			]
		});
	});
    
    function openMap(){
    	var long=$("#hotleLng").val();
    	var lat= $("#hotleLat").val();
    	var name=$("#hotelName").html();
    	var address=$("#hotleAddress").val();
    	if(long!=null && parseFloat(long)!=0 && long!="undefined"&&lat!=null && parseFloat(long)!=0 && lat!="undefined" ){
//    		var latandlong=bd2gcjString(parseFloat(lat)+","+parseFloat(long)).split(",");
//    		var lat=latandlong[0];
//    		var long=latandlong[1];
            wx.openLocation({
			    //latitude: parseFloat(lat)+0.00249663, // 纬度，浮点数，范围为90 ~ -90
			    //longitude: parseFloat(long)+0.00660968, // 经度，浮点数，范围为180 ~ -180。
			    latitude: parseFloat(lat), // 纬度，浮点数，范围为90 ~ -90
			    longitude: parseFloat(long), // 经度，浮点数，范围为180 ~ -180。
			    name: name, // 位置名
			    address: address, // 地址详情说明
                scale: 15, // 地图缩放级别,整形值,范围从1~28。默认为最大
                success: function (res) {
                    console.log(res)
                },
                fail: function (res){
                    console.log(res)
                }
			});
    	}
    }
	
	function changeCollection(type){
			$.ajax({
		        url:"<%=basePath%>home/hotelCollection",
		        type:"post",
		        data:{type:type,hotelKey:$("#hotelKey").val(),memKey:$("#memKey").val()},
		        success:function(data){
		            if(data=="success"){
		            	if(type==1){
		            		art.dialog.tips('收藏成功');
		            		$("#cancleCollectionImg").hide();
		            		$("#collectionImg").show();
		            	}else{
		            		art.dialog.tips('取消收藏成功');
		            		$("#collectionImg").hide();
		            		$("#cancleCollectionImg").show();
		            	}
		            }else{
		            	if(type==1){
		            		art.dialog.tips('收藏失败');
		            	}else{
		            		art.dialog.tips('取消收藏失败');
		            	}
		            }
		        },
		        error:function(e){
		            art.dialog.tips('操作异常！');
		        }
		    });
	}
	function shareWX(link){
	}
	
	function bd2gcjString(value) {
        var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
        var ll = value.split(",");
        var x = ll[0] - 0.0062, y = ll[1] - 0.0063;
//        var x = ll[0] - 0.0065, y = ll[1] - 0.006;
        var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
        var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
        return (z * Math.cos(theta)) + ',' + (z * Math.sin(theta));
//        return (z * Math.cos(theta)-0.002062) + ',' + (z * Math.sin(theta)-0.006532);
	}
	
    function _showDetail(RoomType,RoomId,FullBit){
    	$.ajax({
	        url:"<%=basePath%>home/getRoomDetailInfo",
	        type:"post",
	        data:{roomId:RoomId,memKey:$("#memKey").val()},
	        success:function(data){
			    $("#RoomType").html(RoomType);
		    	$("#RoomId").val(RoomId);
		    	if(data=="error"){
		    		art.dialog.tips('系统错误！');
		    	}else{
		    		var result=eval('(' + data + ')');
		    		var picHtml='<div class="m-slider" data-ydui-slider'+RoomId+' ><div class="slider-wrapper">';
		    		var TurnPicList=result.TurnPicList;
			    	for(var i=0;i<TurnPicList.length;i++){
			    		picHtml+='<div class="slider-item">'
                  				+'<a href="javascript:;"><img src="'+TurnPicList[i].PicAddress+'"></a>'
                  				+'</div>';
			    	}
			    	picHtml+='</div><div class="slider-pagination"></div></div>';
			    	$("#RoomTypePic").html(picHtml);
			    	
			    	$('[data-ydui-slider'+RoomId+']').each(function() {
			            var $this = $(this);
			            $this.slider(window.YDUI.util.parseOptions($this.data('ydui-slider')));
			        });
			        
			        var sv_count=0;
			        var explaindata=result.dataList;
			        if(explaindata.RoomArea!=""){
			        	sv_count=sv_count+1;
			        	$("#td"+sv_count).html("面积");
			        	$("#tdv"+sv_count).html(explaindata.RoomArea);
			        }
			        if(explaindata.Floor!=""){
			        	sv_count=sv_count+1;
			        	$("#td"+sv_count).html("楼层");
			        	$("#tdv"+sv_count).html(explaindata.Floor);
			        }
			        if(explaindata.BedType!=""){
			        	sv_count=sv_count+1;
			        	$("#td"+sv_count).html("床型");
			        	$("#tdv"+sv_count).html(explaindata.BedType);
			        }
			        if(explaindata.Smokeless!=""){
			        	sv_count=sv_count+1;
			        	$("#td"+sv_count).html("无烟");
			        	$("#tdv"+sv_count).html(explaindata.Smokeless);
			        }
			        if(explaindata.AddBed!=""){
			        	sv_count=sv_count+1;
			        	$("#td"+sv_count).html("加床");
			        	$("#tdv"+sv_count).html(explaindata.AddBed);
			        }
			        if(explaindata.WindowInfo!=""){
			        	sv_count=sv_count+1;
			        	$("#td"+sv_count).html("窗户");
			        	$("#tdv"+sv_count).html(explaindata.WindowInfo);
			        }
			        if(sv_count>=1){
			        	$("#tr1").show();
			        }
			        if(sv_count>=3){
			        	$("#tr2").show();
			        }
			        if(sv_count>=5){
			        	$("#tr3").show();
			        }
			        var lv_count=0;
			        if(explaindata.Broadband!=""){
			        	lv_count=lv_count+1;
			        	$("#tdl"+lv_count).html("宽带");
			        	$("#tdlv"+lv_count).html(explaindata.Broadband);
			        	$("#trl"+lv_count).show();
			        }
			        if(explaindata.ShowerRoom!=""){
			        	lv_count=lv_count+1;
			        	$("#tdl"+lv_count).html("浴室");
			        	$("#tdlv"+lv_count).html(explaindata.ShowerRoom);
			        	$("#trl"+lv_count).show();
			        }
			        if(explaindata.MediaTechnology!=""){
			        	lv_count=lv_count+1;
			        	$("#tdl"+lv_count).html("媒体科技");
			        	$("#tdlv"+lv_count).html(explaindata.MediaTechnology);
			        	$("#trl"+lv_count).show();
			        }
			        if(explaindata.Food!=""){
			        	lv_count=lv_count+1;
			        	$("#tdl"+lv_count).html("食品饮料");
			        	$("#tdlv"+lv_count).html(explaindata.Food);
			        	$("#trl"+lv_count).show();
			        }
			        if(explaindata.Facilities!=""){
			        	lv_count=lv_count+1;
			        	$("#tdl"+lv_count).html("便利服务");
			        	$("#tdlv"+lv_count).html(explaindata.Facilities);
			        	$("#trl"+lv_count).show();
			        }
			        if(explaindata.Bedding!=""){
			        	lv_count=lv_count+1;
			        	$("#tdl"+lv_count).html("床品");
			        	$("#tdlv"+lv_count).html(explaindata.Bedding);
			        	$("#trl"+lv_count).show();
			        }
			        if(explaindata.OtherInfo!=""){
			        	lv_count=lv_count+1;
			        	$("#tdl"+lv_count).html("其他信息");
			        	$("#tdlv"+lv_count).html(explaindata.OtherInfo);
			        	$("#trl"+lv_count).show();
			        }
			        
					$(".am-share").addClass("am-modal-active");	
					if($(".sharebg").length>0){
						$(".sharebg").addClass("sharebg-active");
					}else{
						$("body").append('<div class="sharebg"></div>');
						$(".sharebg").addClass("sharebg-active");
					}
					$(".sharebg-active,.share_btn").click(function(){
						$(".am-share").removeClass("am-modal-active");	
						setTimeout(function(){
							$(".sharebg-active").removeClass("sharebg-active");	
							$(".sharebg").remove();	
						},300);
					});
					if(FullBit){
						$("#showPriceBut").hide();						
					}else{
						$("#showPriceBut").show();
					}
					
		    	}
	        },
	        error:function(e){
	            art.dialog.tips('操作异常！');
	        }
	    });
	}
	function showprice(){
		var trid=$("#RoomId").val();
    	document.getElementById(trid).style.display='block';
        $("#jgmc"+trid).html("门市价");
        $("#zdj"+trid).hide();
        $("#msj"+trid).show();
		$(".am-share").removeClass("am-modal-active");	
		setTimeout(function(){
			$(".sharebg-active").removeClass("sharebg-active");	
			$(".sharebg").remove();	
		},300);
	}
</script>
</html>
